<template>
  <div class="home">
    <div class="solar-syst">
      <div class="sun" />
      <div class="mercury" />
      <div class="venus" />
      <div class="earth" />
      <div class="mars" />
      <div class="jupiter" />
      <div class="saturn" />
      <div class="uranus" />
      <div class="neptune" />
      <div class="pluto" />
      <div class="asteroids-belt" />
    </div>
    <Card class="submit-card" :padding="30">
      <Form ref="form" :model="form" :rules="rule" @submit.native.prevent>
        <FormItem prop="user">
          <Input type="text" v-model="form.id" placeholder="请输入房间号" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit">进入房间</Button>
        </FormItem>
      </Form>
    </Card>
    <h1>推流地址：rtmp://103.231.12.208:1985/myapp/{房间号}<br />服务器小水管，请用最低配置推流，谢谢！</h1>
  </div>
</template>

<script>

export default {
  name: 'home',
  data() {
    return {
      form: {
        id: ''
      },
      rule: {
        id: [
          { required: true, message: '请输入房间号', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleSubmit() {
      this.refs.form.validate(valid => {
        if (valid) {
          this.router.push(`/live/{this.form.id}`)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  $year-in-second: 30;

  @function revolution($pl-year-in-days) {
    @return $pl-year-in-days * $year-in-second / 365.2563 + s;
  }
  @function alphaRandom() {
    @return random(1000) * 0.001;
  }
  @function stars($s, $max-area, $min-area: 0, $star-size: 0) {
    $stars: #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px
      0 #{$star-size}px rgba(255, 255, 255, alphaRandom());
    @for $i from 1 to $s {
      $stars: "#{$stars} , #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px 0 #{$star-size}px rgba(255,255,255, #{alphaRandom()})";
    }
    @return unquote($stars);
  }
  $sun: 40px;
  $mercury-orb: 70px;
  $mercury-pl: 4px;
  $venus-orb: 100px;
  $venus-pl: 8px;
  $earth-orb: 145px;
  $earth-pl: 6px;
  $mars-orb: 190px;
  $mars-pl: 6px;
  $jupiter-orb: 340px;
  $jupiter-pl: 18px;
  $saturn-orb: 440px;
  $saturn-pl: 12px;
  $uranus-orb: 520px;
  $uranus-pl: 10px;
  $neptune-orb: 630px;
  $neptune-pl: 10px;
  $pluto-orb: 780px;
  $pluto-pl: 3px;

  $asteroids-belt-orb: 300px;
  $asteroids-belt-pl: 210px;

  *,
  *:before,
  *:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
    width: 100%;
  }

  body {
    font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .home {
    position: relative;
    background: radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%);
    background-attachment: fixed;
    width: 100vw;
    height: 100vh;
    .submit-card {
      position: absolute;
      width: 350px;
      left: 50%;
      top: 35%;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.25);
      border: none;
      transform: translate(-50%);
    }
    h1 {
      position: absolute;
      z-index: 1000;
      color: #fff;
      width: 100%;
      text-align: center;
      bottom: 25vh;
      line-height: 40px;
    }
  }
  .solar-syst {
    &:after {
      content: "";
      position: absolute;
      height: 2px;
      width: 2px;
      top: -2px;
      background: white;
      box-shadow: stars(500, 1800);
      border-radius: 100px;
    }
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    div {
      border-radius: 1000px;
      top: 50%;
      left: 50%;
      position: absolute;
      z-index: 999;
      &:not(.sun) {
        border: 1px solid rgba(102, 166, 229, 0.12);
        &:before {
          left: 50%;
          border-radius: 100px;
          content: "";
          position: absolute;
        }
      }
      &:not(.asteroids-belt) {
        &:before {
          box-shadow: inset 0 6px 0 -2px rgba(0, 0, 0, 0.25);
        }
      }
    }
  }

  .sun {
    background: radial-gradient(
      ellipse at center,
      #ffd000 1%,
      #f9b700 39%,
      #f9b700 39%,
      #e06317 100%
    );
    height: $sun;
    width: $sun;
    margin-top: -$sun / 2;
    margin-left: -$sun / 2;
    background-clip: padding-box;
    border: 0 !important;
    background-position: -28px -103px;
    background-size: 175%;
    box-shadow: 0 0 10px 2px rgba(255, 107, 0, 0.4),
      0 0 22px 11px rgba(255, 203, 0, 0.13);
  }

  .mercury {
    height: $mercury-orb;
    width: $mercury-orb;
    margin-top: -$mercury-orb / 2;
    margin-left: -$mercury-orb / 2;
    animation: orb revolution(87.5) linear infinite;
    &:before {
      height: $mercury-pl;
      width: $mercury-pl;
      background: #9f5e26;
      margin-top: -$mercury-pl / 2;
      margin-left: -$mercury-pl / 2;
    }
  }

  .venus {
    height: $venus-orb;
    width: $venus-orb;
    margin-top: -$venus-orb / 2;
    margin-left: -$venus-orb / 2;
    animation: orb revolution(224.7) linear infinite;
    &:before {
      height: $venus-pl;
      width: $venus-pl;
      background: #beb768;
      margin-top: -$venus-pl / 2;
      margin-left: -$venus-pl / 2;
    }
  }

  .earth {
    height: $earth-orb;
    width: $earth-orb;
    margin-top: -$earth-orb / 2;
    margin-left: -$earth-orb / 2;
    animation: orb revolution(365.2563) linear infinite;
    &:before {
      height: $earth-pl;
      width: $earth-pl;
      background: #11abe9;
      margin-top: -$earth-pl / 2;
      margin-left: -$earth-pl / 2;
    }
    &:after {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 50%;
      top: 0px;
      margin-left: -9px;
      margin-top: -9px;
      border-radius: 100px;
      box-shadow: 0 -10px 0 -8px grey;
      animation: orb revolution(27.3216) linear infinite;
    }
  }
  .mars {
    height: $mars-orb;
    width: $mars-orb;
    margin-top: -$mars-orb / 2;
    margin-left: -$mars-orb / 2;
    animation: orb revolution(687) linear infinite;
    &:before {
      height: $mars-pl;
      width: $mars-pl;
      background: #cf3921;
      margin-top: -$mars-pl / 2;
      margin-left: -$mars-pl / 2;
    }
  }

  .jupiter {
    height: $jupiter-orb;
    width: $jupiter-orb;
    margin-top: -$jupiter-orb / 2;
    margin-left: -$jupiter-orb / 2;
    animation: orb revolution(4331) linear infinite;
    &:before {
      height: $jupiter-pl;
      width: $jupiter-pl;
      background: #c76e2a;
      margin-top: -$jupiter-pl / 2;
      margin-left: -$jupiter-pl / 2;
    }
  }
  .saturn {
    height: $saturn-orb;
    width: $saturn-orb;
    margin-top: -$saturn-orb / 2;
    margin-left: -$saturn-orb / 2;
    animation: orb revolution(10747) linear infinite;
    &:before {
      height: $saturn-pl;
      width: $saturn-pl;
      background: #e7c194;
      margin-top: -$saturn-pl / 2;
      margin-left: -$saturn-pl / 2;
    }
    &:after {
      position: absolute;
      content: "";
      height: 2.34%;
      width: 4.676%;
      left: 50%;
      top: 0px;
      transform: rotateZ(-52deg);
      margin-left: -2.3%;
      margin-top: -1.2%;
      border-radius: 50% 50% 50% 50%;
      box-shadow: 0 1px 0 1px #987641, 3px 1px 0 #987641, -3px 1px 0 #987641;
      animation: orb revolution(10747) linear infinite;
      animation-direction: reverse; // compensate to reverse main orbit animation
      transform-origin: 52% 60%;
    }
  }

  .uranus {
    height: $uranus-orb;
    width: $uranus-orb;
    margin-top: -$uranus-orb / 2;
    margin-left: -$uranus-orb / 2;
    animation: orb revolution(30589) linear infinite;
    &:before {
      height: $uranus-pl;
      width: $uranus-pl;
      background: #b5e3e3;
      margin-top: -$uranus-pl / 2;
      margin-left: -$uranus-pl / 2;
    }
  }

  .neptune {
    height: $neptune-orb;
    width: $neptune-orb;
    margin-top: -$neptune-orb / 2;
    margin-left: -$neptune-orb / 2;
    animation: orb revolution(59802) linear infinite;
    &:before {
      height: $neptune-pl;
      width: $neptune-pl;
      background: #175e9e;
      margin-top: -$neptune-pl / 2;
      margin-left: -$neptune-pl / 2;
    }
  }

  .asteroids-belt {
    opacity: 0.7;
    border-color: transparent !important;
    height: $asteroids-belt-orb;
    width: $asteroids-belt-orb;
    margin-top: -$asteroids-belt-orb / 2;
    margin-left: -$asteroids-belt-orb / 2;
    animation: orb revolution(2191) linear infinite;
    overflow: hidden;
    &:before {
      top: 50%;
      height: $asteroids-belt-pl;
      width: $asteroids-belt-pl;
      margin-left: -$asteroids-belt-pl / 2;
      margin-top: -$asteroids-belt-pl / 2;
      background: transparent;
      border-radius: 140px !important;
      box-shadow: stars(390, 290, -290/2, -104);
    }
  }

  .pluto {
    height: $pluto-orb;
    width: $pluto-orb;
    margin-top: -$pluto-orb / 2 + -60;
    margin-left: -$pluto-orb / 2 + 70;
    animation: orb revolution(90580) linear infinite;
    &:before {
      height: $pluto-pl;
      width: $pluto-pl;
      background: #fff;
      margin-top: -$pluto-pl / 2;
      margin-left: -$pluto-pl / 2;
    }
  }

  .hide {
    display: none;
  }
  .links {
    margin-top: 5px !important;
    font-size: 1em !important;
  }

  @keyframes orb {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
</style>